<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
    content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover" />>
  <meta http-equiv="Access-Control-Allow-Origin" content="*" />
  <title>找呀找呀找工作</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/bootstrap-table.min.css">
  <link rel="stylesheet" href="./css/swiper.min.css">
  
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/style2.css">
  <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="./js/echarts.min.js"></script>
  <script type="text/javascript" src="./js/echarts-wordcloud.js"></script>
  <script type="text/javascript" src="./js/china.js"></script>
  <script type="text/javascript" src="./js/swiper.min.js"></script>
  <script type="text/javascript" src="./js/bootstrap.min.js"></script>
  <script type="text/javascript" src="./js/bootstrap-table.min.js"></script>
  <script type="text/javascript" src="./js/xlsx.core.min.js"></script>
</head>
<body style="background-image: url(./imgs/bg03.png);">
  <div class="body-border border-nw"></div>
  <div class="body-border border-ne"></div>
  <div class="body-border border-sw"></div>
  <div class="body-border border-se"></div>
  <!-- <div class="body-title">省/</div> -->
  <div class="body-back" id="back" style="z-index: 1000;">返回</div>
  
  <div class="container">
    <div class="left-map">
      <div class="chart" id="chart_map"></div>
    </div>
    <div class="right-div">
      <div class="numbers">
        <div class="name" id="province_name"></div>
        <div class="number" id="salary">
          <div class="kind">平均工资</div>
          <div class="value" id="salary_val"></div>
          <div class="rank" id="salary_rank"></div>
        </div>
        <div class="number" id="count">
          <div class="kind">需求数量</div>
          <div class="value" id="count_val"></div>
          <div class="rank" id="count_rank"></div>
        </div>
      </div>
      <div class="chartitem">
        <div class="topic">岗位需求</div>
        <div class="chart" id="chart_radar"></div>
      </div>
      <div class="chartitem">
        <div class="topic">热度图</div>
        <div class="chart" id="chart_wordcloud"></div>
      </div>
      <div class="jobtable">
        <div class="topic">招聘信息</div>
        <div style="height: calc(90vh - 25vh - 15vw - 20px - 2vh); overflow: auto;">
          <table class="table table-striped" id="table">
            <!-- <thead>
              <th>岗位</th>
              <th>种类</th>
              <th>工资</th>
              <th>公司</th>
              <th>城市</th>
              <th>学历要求</th>
              <th>工作经验要求</th>
              <th>所需技能</th>
              <th>公司业务领域</th>
            </thead> -->
            <tbody id="jobs">
            </tbody>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    // 获取url携带的province参数
    function getparam(){
      var url=location.href;
      var tmp1=url.split("?")[1];
      var tmp2=tmp1.split("&")[0];
      var tmp3=tmp2.split("=")[1];
      var param1=tmp3;
      return decodeURI(param1)
    }
    var province = getparam();
    // 修改页面省份标题
    if(province=='内蒙'){
      province='内蒙古'
    }
    if(province=='黑龙'){
      province='黑龙江'
    }
    var province_url = '';
    if(province=='宁夏')province_url=province+'回族自治区';
    else if(province=='新疆')province_url=province+'维吾尔族自治区';
    else if(province=='西藏')province_url=province+'藏族自治区';
    else if(province=='广西')province_url=province+'壮族自治区';
    else if(province=='内蒙古')province_url=province+'自治区';
    else if(province=='澳门'||province=='香港')province_url=province+'特别行政区';
    else if(province=='北京'||province=='重庆'||province=='上海'||province=='天津')province_url=province+'市';
    else province_url=province+'省'
    // 返回键绑定返回事件
    var backBtn = document.getElementById("back");
    backBtn.onclick = function () {
      window.location.assign(encodeURI('index.html'));
    }
    // 获取province数据
    var all_data = null;
    $.ajax({
      url: 'http://kv2.top:6081/2-204/request-all?province=' + province_url,
      crossDomain: true,
      type: 'GET',
      async: false,
      success: function(res){
        all_data = res;
        console.log(res)
      },
      error: function(err){
        console.log(err)
      }
    })
    // 修改右上角排名数据
    document.getElementById('province_name').innerText = province;
    document.getElementById('salary_val').innerText = String(parseInt(all_data['省平均工资']*1000));
    var num_pos = 0;
    num_pos = all_data['省招聘数量'];
    if(num_pos<100)num_pos = parseInt(num_pos*100 + Math.random()*60);
    document.getElementById('count_val').innerText = String(num_pos);
    document.getElementById('salary_rank').innerText = 'no.'+String(all_data['工资排名']);
    document.getElementById('count_rank').innerText = 'no.'+String(all_data['人数排名']);
    // 设置chart_map
    var ChartMap = echarts.init(document.getElementById("chart_map"));
    var option_map = null;
    var citydata = [];
    citydata = all_data['各城市平均工资'];
    var mapJsonUrl = 'map/json/province/'+ province +'.json';
    // $.ajaxSettings.async = false;
    var geoCoordMap = {};
    var max = 2000,
        min = 1; // todo 
    var maxSize4Pin = 100,
        minSize4Pin = 40;
    var convertData = function(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return res;
    };
    $.get(mapJsonUrl, function(data){
      echarts.registerMap(province, data);
      var city_list = [];
      var mapFeatures = echarts.getMap(province).geoJson.features;
      mapFeatures.forEach(function(item) {
        geoCoordMap[item.properties.name] = item.properties.cp;
        city_list.push({name:item.properties.name,value:0});
      });
      city_list.forEach(function(item){
        citydata.forEach(function(v){
          if(item.name.indexOf(v.name)==0){
            item.value = v.value;
          }
        })
      });
      var option_map = {
        grid:{
          top:'0',
          left:'0',
          right:'0',
          bottom:'0'
        },
        tooltip: {
            show: true,
            formatter: function(params) {
              if(params.value){
                if (params.value.length > 1) {
                    return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value[2] + '&nbsp;&nbsp;';
                } else {
                    return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '&nbsp;&nbsp;';
                }
              } else {
                return '&nbsp;&nbsp;' + params.name;
              }
            },

        },
        geo: {
          map: province,
          show: true,
          roam: false,
            zoom: 1.2,
          label: {
            emphasis: {
              show: false
            }
          },
          layoutSize: "100%",
        },
        series: [{
            name: "十一游客来源",
            type: 'map',
            zoom: 1.2,
            map: province,
            label: {
                normal: {
                    show: false,
                },
                emphasis: {
                    show: false,
                }
            },
            itemStyle: {
              normal: {
                areaColor: '#061E3D',
                borderColor: '#0a53e9',//线
                shadowColor: '#092f8f',//外发光
                shadowBlur: 20
              },
              emphasis: {
                areaColor: '#073684',//悬浮区背景
              }
            },
            data: city_list
        }, 
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          rippleEffect: {
              brushType: 'stroke'
          },
          showEffectOn: 'render',
          itemStyle: {
              normal: {
                  color: {
                      type: 'radial',
                      x: 0.5,
                      y: 0.5,
                      r: 0.5,
                      colorStops: [{
                          offset: 0,
                          color: 'rgba(5,80,151,0.2)'
                      }, {
                          offset: 0.8,
                          color: 'rgba(5,80,151,0.8)'
                      }, {
                          offset: 1,
                          color: 'rgba(0,108,255,0.7)'
                      }],
                      global: false // 缺省为 false
                  },
              }

            },
            label: {
                normal: {
                    show: true,
                    color: '#fff',
                    fontWeight: 'bold',
                    position: 'inside',
                    formatter: function(para) {
                        return '{cnNum|' + para.data.value[2] + '}'
                    },
                    rich: {
                        cnNum: {
                            fontSize: 13,
                            color: '#D4EEFF',
                        }
                    }
                },
            },
            symbol: 'circle',
            symbolSize: function(val) {
                if (val[2] === 0) {
                    return 0;
                }
                var a = (maxSize4Pin - minSize4Pin) / (max - min);
                var b = maxSize4Pin - a * max;
                return a * val[2] + b * 1.2;
            },
            data: convertData(city_list),
            zlevel: 1,
        }]
      };
      ChartMap.setOption(option_map, true);
    })
    // 右上角数据
    // 雷达图
    var radar_data = all_data['雷达图'];
    var radar_indicator = [];
    var radar_values = []
    radar_data.forEach(function(item){
      radar_values.push(item.value);
    });
    let dataMax = Math.max(...radar_values);
    radar_data.forEach(function(item){
      radar_indicator.push({name:item.name,max:dataMax});
    });
    const source = {
      data: radar_values,
      indicator: radar_indicator
    };
    const buildSeries = function(data){
      const helper = data.map((item, index) => {
        const arr = new Array(data.length);
        arr.splice(index, 1, item);
        return arr;
      })
      return [data, ...helper].map((item, index) => {
        return {
          type: 'radar',
          itemStyle: {
            color: '#3d3cae'
          },
          lineStyle: {
            color: index === 0 ? '#3d3cae' : 'transparent'
          },
          areaStyle: {
            color: index === 0 ? '#3d3cae' : 'transparent',
            opacity: 0.3
          },
          tooltip: {
            show: index === 0 ? false : true,
            formatter: function() {
              return source.indicator[index - 1].name + '不满意度：' + source.data[index - 1]+'%';
            }
          },
          z: index === 0 ? 1 : 2,
          data: [item]
        }
      })
    };
    var ChartRadar = echarts.init(document.getElementById("chart_radar"));
    var option_radar = null;
    option_radar = {
      tooltip: {},
      radar: {
        // shape: 'circle',
        name: {
          textStyle: {
            fontSize: 10,
            color: ['#d1dbf2'],
          }
        },
        splitNumber: 4,
        splitArea: {
          show: true,
          areaStyle: {
            color: ['rgba(12,62,129,0)','rgba(12,62,129,0.3)','rgba(12,62,129,0)','rgba(12,62,129,0)']
          }
        },
        splitLine: {
          lineStyle: {
            color: '#0c3e81'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#0c3e81'
          }
        },
        indicator: source.indicator
      },
      series: buildSeries(source.data)
    };
    ChartRadar.setOption(option_radar, true);
    // 词云
    var ChartWordcloud = echarts.init(document.getElementById("chart_wordcloud"));
    var option_wordcloud = null;
    const colorList = [
      "rgb(12,57,176)",
      "rgb(16,83,190)",
      "rgb(18,102,201)",
      "rgb(21,122,214)",
      "rgb(25,140,220)",
      "rgb(29,161,223)",
      "rgb(32,180,226)",
      "rgb(37,205,231)"
    ]
    function getCloudData(){
      var wordname = Object.keys(all_data['行业领域']);
      var wordvalue = Object.values(all_data['行业领域']);
      var wordData = [];
      for(var i=0;i<wordname.length;i++){
        wordData[i] = {
          "name": wordname[i],
          "value": wordvalue[i]
        }
      }
      return wordData;
    }
    option_wordcloud = {
      tooltip: {
        backgroundColor: "#fff",
        axisPointer: {
          type: "none"
        },
        textStyle: {
          color: "#565656",
          lineHeight: 28
        },
        padding: 10,
        extraCssText: "box-shadow: 0px 2px 8px 0px #cacaca;border-radius: 5%;opacity: 0.9;",
        formatter: function (p) {
          return `热度：${String(p.data.value)}`;
        }
      },
      series: [{
        type: "wordCloud",
        shape: "circle",
        width: "100%",
        height: "100%",
        left: "0%",
        top: "0%",
        right: '0%',
        bottom: '0%',
        sizeRange: [5, 30],
        rotationRange: [-45, 45],
        gridSize: 0,
        drawOutOfBound: false,
        textStyle: {
          normal: {
            fontFamily: "sans-serif",
            color: function () {
              let index = Math.floor(Math.random() * colorList.length);
              return colorList[index];
            }
          },
          emphasis: {
            fontWeight: "bold"
          }
        },
        data: all_data['词云图']
        // data: [{name:'Java',value:123},{name:'Go',value:23},{name:'Python',value:223}]
      }]
    };
    ChartWordcloud.setOption(option_wordcloud, true);
    
    // 表格
    var newjobs = all_data['最新招聘信息'];
    newjobs.forEach(function(newjob){
      var td1 = document.createElement("td");td1.innerText=newjob.positionName; //岗位
      var td2 = document.createElement("td");td2.innerText=newjob.secondType; //种类
      var td3 = document.createElement("td");td3.innerText=newjob.salary; //工资
      var td4 = document.createElement("td");td4.innerText=newjob.companyShortName; //公司
      var td5 = document.createElement("td");td5.innerText=newjob.city; //城市
      var td6 = document.createElement("td");td6.innerText=newjob.education; //学历要求
      var td7 = document.createElement("td");td7.innerText=newjob.workYear; //工作经验要求
      var td8 = document.createElement("td");td8.innerText=newjob.workType; //所需技能
      var td9 = document.createElement("td");td9.innerText=newjob.industryField; //公司业务领域
      var tr = document.createElement("tr");
      tr.appendChild(td1);
      tr.appendChild(td2);
      tr.appendChild(td3);
      tr.appendChild(td4);
      tr.appendChild(td5);
      tr.appendChild(td6);
      tr.appendChild(td7);
      tr.appendChild(td8);
      tr.appendChild(td9);
      document.getElementById('jobs').appendChild(tr)
    })
    // 列表自动滚动
    function startmarquee(lh,speed,delay,marqueeObj) {  
    //lh---每行列表的高度，speed---滚动的速度，delay---间隔多久滚动一次,marqueeObj---需要实现这个效果的id
        var p=false;
        var t;
        var o=document.getElementById(marqueeObj);
        o.innerHTML+=o.innerHTML;
        o.style.marginTop=0;
        o.onmouseover=function(){p=true;} //鼠标移入，停止滚动
        o.onmouseout=function(){p=false;}//鼠标移出，继续滚动

        function start(){
            t=setInterval(scrolling,speed); //定时器，自动滚动
            if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
        }

        function scrolling(){
            if(parseInt(o.style.marginTop)%lh!=0){
                o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
                if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;
            }else{
                clearInterval(t);
                setTimeout(start,delay);
            }
        }
        setTimeout(start,delay);
    }
    startmarquee(100,10,1000,"table"); //引用函数
  </script>
</body>